<template>
	<div v-if="show" class="modal-bg">
		<div class="modal-container">
			<div class="modal-header">
				<span
					:style="{
						color: type === 0 ? '#06c636' : type === 1 ? 'red' : ''
					}"
				>
					{{ title }}
				</span>
				<span class="btnX" @click="hideModal">
					<i class=" el-icon-close"></i>
				</span>
			</div>
			<div class="modal-main">
				<slot></slot>
			</div>
			<div class="modal-footer">
				<div v-if="showBtn">
					<div @click="hideModal">
						<el-button>
							{{ $t('common.cancel') }}
						</el-button>
					</div>
					<div @click="submit">
						<!-- danger -->
						<el-button
							style="width:120px;color:#fff"
							:style="{
								background:
									type === 0
										? '#06c636'
										: type === 1
										? 'red'
										: '#409EFF'
							}"
						>
							{{ confirmText }}
						</el-button>
					</div>
				</div>
				<el-button v-else style="width:180px" @click="hideModal">
					{{ $t('common.components.know') }}
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import i18n from '@/locales'

export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		showBtn: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: i18n.t('common.components.tip')
		},
		confirmText: {
			type: String,
			default: i18n.t('common.confirm')
		},
		type: {
			type: [String, Number],
			default: ''
		}
	},

	methods: {
		submit() {
			this.$emit('confirm', true)
			this.hideModal()
		},
		hideModal() {
			this.$emit('update:show', false)
		}
	}
}
</script>

<style lang="scss" scoped>
.modal-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2773;
}
.modal-container {
	overflow: hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 350px;
	background: #ffffff;
}
.modal-header {
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 24px;
	padding: 0 15px;
	color: #4c3432;
	font-weight: 600;
	cursor: pointer;
	.btnX {
		display: block;
		display: block;
		font-size: 38px;
		font-weight: 900;
	}
}
.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 72px;
	line-height: 72px;
}
.modal-footer div {
	width: 240px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	border-radius: 40px;
	cursor: pointer;
}

.modal-main {
	height: 230px;
	margin: 0 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #666666;
	font-weight: 400;
}
</style>
